<template>
    <!-- 控制弹窗的显示和隐藏是用dialogVisible来的 根据下面的绑定就可以知道， isShow 变成了flase 这个弹窗就会关闭 -->
    
    <!-- 然后这里加上了一个三元表达式，从而可以使得一个弹窗可以有三种  相当于是根据info的值来进行判断是要增加还是要修改-->
    <!-- 这个地方加上一个draggable就可以使得弹窗可以自由的拖动了  @close="$emit('closeAdd')这个相当于用的就是绑定了页面上面的×-->
    <el-dialog v-model="dialogVisible" :title="info?.name ?  '修改' : '新增'"  width="30%" @close="$emit('closeAdd')" draggable>
        <el-form>
            <el-form-item label="时间" prop="date">
                <el-date-picker v-model="form.date" type="date" placeholder="请选择一个时间" :disableDate="disablesDate"/>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="form.address" />
            </el-form-item>
            <el-form-item label="排序" prop="order">
                <el-input v-model.number="form.order" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAdd()">Cancel</el-button>
                <el-button type="primary" @click="save()">Confirm</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
    import { ref, Ref, computed , watch} from 'vue'
    import User from '../class/User'
    // 这个是一个内置的函数，用来接收参数控制弹窗
    const props=defineProps({
        isShow: Boolean,
        info:User
    })
    // 下面这个实现的就是将isShow 和dialogVisible进行了绑定 isShow变成了true 他也变成和他一样的 时间的监听
    const dialogVisible = computed(()=>props.isShow)
    // 这个大写的Ref是用来声明我是User类型的。
    const form : Ref<User> = ref<User>({
        id: "",
        date: "",
        name: "",
        address: "",
        order: 0
    })
    // 卸载form的下面watch的监听器，是为了实现联动。
    watch(() => props.info, (newInfo) => {
        if(newInfo)  {
            form.value = {
                id: newInfo.id,
                date: newInfo.date,
                name: newInfo.name,
                address: newInfo.address,
                order: newInfo.order
            }
        }
    })
    const disablesDate = (time: any) => {
        //最大时间，从今天开始。
        const _maxTime = Date.now() - 24 * 60 * 1000 * 1
        return time.getTime() <= _maxTime

    }
const emits = defineEmits(["closeAdd", "success"])
const closeAdd=()=>{
    emits("closeAdd")
}
const save=()=>{
    emits("success")
}
</script>